<template>
	<view class="content">
		<u-navbar  title="完善资料":background="{background: '#000'}" back-icon-color="#ffffff" title-color="#fff" :border-bottom="false" hover-class="none">
			<view class="" style="position: absolute;right: 40rpx;color: #D6A666;font-size: 30rpx;" @click="editrequest">保存</view>
		</u-navbar>
		<view style="height: 20rpx;"></view>
		<view style="width: 80%;margin: auto;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #FFFFFF;margin-top: 40rpx;">
			<view>头像</view>
			<view style="display: flex;align-items: center;">
				<u-avatar size="120" @click="picops4click" :src="head"></u-avatar>
				<u-icon name="arrow-right" color="#fff" size="25" style="margin-left: 40rpx;"></u-icon>
			</view>
		</view>
		<view style="width: 80%;height: 80rpx;margin: auto;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #FFFFFF;margin-top: 40rpx;">
			<view>昵称</view>
			<input type="text" style="text-align: end;color: #fff;width: 60%;" placeholder-style="color:#D6A666" v-model="userinfo.name" placeholder="请填写" />
		</view>
		<view style="width: 80%;height: 80rpx;margin: auto;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #FFFFFF;margin-top: 40rpx;">
			<view>年龄</view>
			<view class="value" @click="ageshow = true" :style="userinfo.age?'':'color:#D6A666'">
				{{userinfo.age?userinfo.age:'请选择'}} 
				<u-icon name="arrow-right" color="#fff" size="25" style="margin-left: 20rpx;"></u-icon>
			</view>
		</view>
		<view style="width: 80%;height: 80rpx;margin: auto;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #FFFFFF;margin-top: 40rpx;">
			<view>身高</view>
			<view class="value" @click="sgshow = true" :style="userinfo.stature?'':'color:#D6A666'">
				{{userinfo.stature?userinfo.stature:'请选择'}} 
				<u-icon name="arrow-right" color="#fff" size="25" style="margin-left: 20rpx;"></u-icon>
			</view>
		</view>
		<view style="width: 80%;height: 80rpx;margin: auto;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #FFFFFF;margin-top: 40rpx;">
			<view>体重</view>
			<view class="value" @click="tzshow = true" :style="userinfo.weight?'':'color:#D6A666'">
				{{userinfo.weight?userinfo.weight:'请选择'}} 
				<u-icon name="arrow-right" color="#fff" size="25" style="margin-left: 20rpx;"></u-icon>
			</view>
		</view>
		<view style="width: 80%;height: 80rpx;margin: auto;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #FFFFFF;margin-top: 40rpx;">
			<view>职业</view>
			<view class="value" @click="zhiyeshow = true" :style="userinfo.occupation?'':'color:#D6A666'">
				{{userinfo.occupation?userinfo.occupation:'请选择'}} 
				<u-icon name="arrow-right" color="#fff" size="25" style="margin-left: 20rpx;"></u-icon>
			</view>
		</view>
		<view style="width: 80%;height: 80rpx;margin: auto;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #FFFFFF;margin-top: 40rpx;">
			<view>个性标签</view>
			<view class="value" :style="userinfo.occupation?'':'color:#D6A666'" @click="tiaozhuan('../profile/label')">
				{{userinfo.gxbq.length==0?'请选择':'已选择'}} 
				<u-icon name="arrow-right" color="#fff" size="25" style="margin-left: 20rpx;"></u-icon>
			</view>
		</view>
		<view class="flex-w wid90 mar" style="" >
			<view v-for="(item,index) in userinfo.gxbq" :key="index" class="flex disAl" style="margin-bottom: 30rpx; margin-right: 20rpx;">
				<view class="flex-c biaoqian"
					style="border: 1rpx solid #D6A666;color: #D6A666;">{{item}}</view>
			</view>
		</view>
		<view style="width: 80%;margin: auto;font-size: 30rpx;color: #FFFFFF;margin-top: 60rpx;">
			<view>简介</view>
			<textarea style="color: #FFFFFF;margin-top: 20rpx;font-size: 25rpx;line-height: 40rpx;" auto-height 
				v-model="userinfo.self_slogan" placeholder-style="color:#D6A666" placeholder="请简单介绍自己，选填"></textarea >
		</view>
		<view style="height: 40rpx;"></view>
		<u-picker mode="selector" v-model="sgshow" @confirm="setsg" :default-selector="[0]" :range="sgselector"></u-picker>
		<u-picker mode="selector" v-model="tzshow" @confirm="settz" :default-selector="[0]" :range="tzselector"></u-picker>
		<u-picker mode="selector" v-model="zhiyeshow" @confirm="setzhiye" :default-selector="[0]" :range="zhiyeselector"></u-picker>
		<u-picker mode="selector" v-model="ageshow" @confirm="setage" :default-selector="[0]" :range="ageselector"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HOSTURL: this.$HOSTURL,
				head: '',
				jyyhshow:false,
				jyyh:'',
				jyops:[{text:'网游',checked:false},{text:'运动会友',checked:false},{text:'同城信息',checked:false},{text:'旅行休闲',checked:false},{text:'看电影',checked:false},{text:'废物回收',checked:false},{text:'连麦聊天',checked:false}],
				yhops:[{text:'收费约会',checked:false},{text:'跟钱没关系',checked:false},{text:'我要帅哥',checked:false},{text:'夜蒲聚会',checked:false},{text:'我要好玩',checked:false},{text:'我需要关爱',checked:false},{text:'看情况',checked:false}],
				zhiyeshow:false,
				zhiyeselector:['在校学生','计算机/互联网/IT','电子/半导体/仪器仪表','通信技术','销售','市场拓展','公关/商务','人力资源/行政/后勤','高级管理','生产/加工/制造','质控/安检','工程机械','技工','财会/审计/统计','金融/证券/投资/保险','房地产/装修/物业','仓储/物流','普通劳动力/家政服务','普通服务行业','航空服务业','教育/培训','咨询/顾问','学术/研究','法律','设计/创意','文学/传媒/影视','餐饮/旅游','化工','能源/地质勘查','医疗/护理','保健/美容','生物/制药/医疗器械','体育工作者','翻译','公务员/国家干部','农/林/牧/渔业','警察','自由职业者','其他'],
				xzshow: false,
				xzops: ['白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座'],
				sgshow:false,
				tzshow:false,
				ageshow:false,
				customStyle: {
					marginTop: '40px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					background:'#673AB7',
					width:'90%'
				},
				showaddpopup: false,
				showaddpopup2: false,
				userinfo: {
					name: '',
					age: '',
					constellation: '',
					occupation: '',
					dy_program: '',
					dy_conditions: '',
					stature: '',
					weight: '',
					self_slogan: '',
					sex: '',
					gxbq:[]
				},
			}
		},
		onLoad() {
			// this.getuserinfo()
		},
		onShow() {
			this.getuserinfo()
		},
		methods: {
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				})
			},
			getuserinfo(){
				var obj = {dy_program:1, dy_conditions: 1}
				this.$store.dispatch('getuserinfo').then(res=>{
					for (var key in this.userinfo) {
						this.userinfo[key] = res[key] == 'null' ? '' : res[key] || '';
						if(obj[key]){
							if(typeof res[key] != 'string'){
								this.userinfo[key] = res[key].join(',')
							}
						}
					}
					this.head = this.HOSTURL + res.head_portrait;
				})
				console.log(userinfo);
			},
			async editrequest(){
				var obj = this.userinfo
				obj.user_id = this.$store.state.userid
				const { data: res } = await this.$Request({
					url:'api/user/editInfo',
					data:obj
				})
				if(res.code==200){
					uni.showToast({
						title:'修改成功'
					})
					uni.navigateBack()
				}
			},
			getuserinfo(){
				var obj = {dy_program:1, dy_conditions: 1}
				this.$store.dispatch('getuserinfo').then(res=>{
					for (var key in this.userinfo) {
						this.userinfo[key] = res[key] == 'null' ? '' : res[key] || '';
						if(obj[key]){
							if(typeof res[key] != 'string'){
								this.userinfo[key] = res[key].join(',')
							}
						}
					}
					this.head = this.HOSTURL + res.head_portrait;
				})
			},
			setage(res){
				this.userinfo.age = this.ageselector[res[0]]
			},
			setsg(res){
				this.userinfo.stature = this.sgselector[res[0]]
			},
			setxz(res){
				this.userinfo.constellation = this.xzops[res[0]]
			},
			settz(res){
				this.userinfo.weight = this.tzselector[res[0]]
			},
			setzhiye(res){
				this.userinfo.occupation = this.zhiyeselector[res[0]]
			},
			showjyyh(text){
				this.jyyhshow = true,
				this.jyyh = text
			},
			chooseitem(e){
				switch(this.jyyh){
					case 'jiaoyou':
					this.jyops[e.currentTarget.dataset.index].checked = !this.jyops[e.currentTarget.dataset.index].checked
					break;
				case 'yuehui':
					this.yhops[e.currentTarget.dataset.index].checked = !this.yhops[e.currentTarget.dataset.index].checked
					break;
				}
			},
			canceljyyh(){
				this.jyyhshow = false,
				this.jyyh = ''
			},
			comfirmjyyh(){
				switch(this.jyyh){
					case 'jiaoyou':
						var jiaoyou = []
						this.jyops.forEach(item=>{
							if(item.checked){
								jiaoyou.push(item.text)
							}
						})
						this.userinfo.dy_program = jiaoyou.join(',')
						break;
					case 'yuehui':
						var yuehui = []
						this.yhops.forEach(item=>{
							if(item.checked){
								yuehui.push(item.text)
							}
						})
						this.userinfo.dy_conditions = yuehui.join(',')
						break;
				}
				this.canceljyyh()
			},
			picops4click(){
				var _this = this
				const permission = 'android.permission.WRITE_EXTERNAL_STORAGE'; // 要检查的权限
				const android_camera = 'android.permission.CAMERA';
				plus.android.checkPermission(
				  permission,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  uni.showModal({
						title: '提示',
						content: '开心小圈对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
						success: function (res) {
							
							uni.chooseImage({
								count:1,
								success: function(res){
									const tempFilePaths = res.tempFilePaths;
									_this.$Upimg({
										image: tempFilePaths[0]
									}, async (uploadFileRes) => {
										const { data: res } = await _this.$Request({
											url:'api/user/editHead',
											data:{
												user_id: _this.$store.state.userid,
												head: uploadFileRes
											}
										})
										if(res.code==200){
											_this.getuserinfo()
											wx.showToast({
												title:'修改成功'
											})
										}else{
											_this.$u.toast(res.result.error)
										}
									})
								}
							})
						},
					  })
					}else{
						uni.chooseImage({
							count:1,
							success: function(res){
								const tempFilePaths = res.tempFilePaths;
								_this.$Upimg({
									image: tempFilePaths[0]
								}, async (uploadFileRes) => {
									const { data: res } = await _this.$Request({
										url:'api/user/editHead',
										data:{
											user_id: _this.$store.state.userid,
											head: uploadFileRes
										}
									})
									if(res.code==200){
										_this.getuserinfo()
										wx.showToast({
											title:'修改成功'
										})
									}else{
										_this.$u.toast(res.result.error)
									}
								})
							}
						})
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
			},
		},
		computed:{
			ageselector(){
				var arr = new Array();
				for(var i=18;i<101;i++){
				  arr.push(i);
				}
				return arr
			},
			sgselector(){
				var arr = new Array();
				for(var i=140;i<201;i++){
				  arr.push(i);
				}
				return arr
			},
			tzselector(){
				var arr = new Array();
				for(var i=40;i<100;i++){
				  arr.push(i);
				}
				return arr
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/uni-input {
	    display: block;
	    font-size: 28rpx;
	    line-height: 1.2em;
	    height: 1.2em;
	    min-height: 1.2em;
	    overflow: hidden;
		color: #000;
	}
	.uni-input-placeholder{
		color: #aaa;
	}
	.content {
		height: 100vh;
		background-color: #000;
		overflow: auto;
		.uphead{
			padding: 20rpx 0;
			text{
				color: #ccc;
				margin: 16rpx 0;
				font-size: 22rpx;
			}
		}
		.tab{
			color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 30rpx 10rpx 30rpx;
		}
		.infoitem {
			background: #000;
			display: flex;
			padding: 20rpx 30rpx;
			&.teli{
				.label {
					flex: 1;
				}
				.value{
					width: auto;
				}
			}
			.label {
				width: 22%;
				font-weight: bold;
				color: #999;
			}
			.value{
				width: 78%;
				color: #fff;
			}
		}
	}
	.select{
		width: 100%;
		height: 400rpx;
		padding:0 20rpx;
		.top{
			color: #673AB7;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
		}
		.selects{
			padding: 30rpx 0;
			display: flex;
			flex-wrap: wrap;
			.item{
				padding: 10rpx 0;
				width: 30%;
				text-align: center;
				border-radius: 10rpx;
				margin-right: 20rpx;
				margin-bottom: 14rpx;
				border:2rpx solid #eee;
				&.checked{
					background-color: #673AB7;
					color: #fff;
				}
			}
		}
	}
	
	.biaoqian{
		font-size: 25rpx;
		height: 52rpx;
		padding: 0 20rpx;
		border: 1rpx solid #fff;
		color: #fff;
		border-radius: 50rpx;
	}
</style>
